<template>
	<view v-if="pageShow" class="container">
		<view class="order_info solid-bottom">
			<view class="title">
				<text>订单详情</text>
			</view>
			<view class="order-content">
				<text class="name">服务名称：</text>
				<text class="params">{{ orderInfo.shop_name }}</text>
			</view>
			<view class="order-content">
				<text class="name">服务金额：</text>
				<text class="params">{{ orderInfo.money }}元</text>
			</view>
			<view class="order-content">
				<text class="name">订单编号：</text>
				<text class="params">{{ orderInfo.order_no }}</text>
			</view>
			<view class="order-content">
				<text class="name">交易时间：</text>
				<text class="params">{{ orderInfo.createtime_text }}</text>
			</view>
		</view>
		<view class="pay-list">
			<view class="pay-item" v-for="(item, index) in payList" :key="index" @click="changePay(item)"
				:class="{ active: payCurrent == item.id }">
				<view class="name flex_align">
					<text class="iconfont" :class="item.icon" :style="{ color: item.iconColor }"></text>
					<text class="name">{{ item.name }}</text>
				</view>
				<text class="check iconfont" :class="payCurrent == item.id ? 'iconchoosehandle' : 'iconweigouxuan'"></text>
			</view>
		</view>
		<view class="middle_box justify_between_center">
			<view class="flex_align">
				<image class="pay_icon mr10"
					src="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/coupon_icon1.png" mode="widthFix">
				</image>
				<text class="">代金券</text>
			</view>
			<view class="right">
				<view class="flex_align" v-if="couponList.length > 0 && !orderInfo.voucher_id" @click="goChoose">
					<text class="fz30 cff4" v-if="couponSelected != null">优惠：¥ {{ couponSelected.voucher_reduce }}</text>
					<text
						style="font-size: 24rpx; background-color: #FA5151; color: #fff; padding: 4rpx 10rpx; border-radius: 4rpx; min-width: 110rpx; display: flex; justify-content: center;align-items: center;"
						v-else> {{ couponList.length }} 张可用</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="flex_align" v-else>
					<text class="fz30 c999 mr10">暂无可用</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view v-if="couponSelected != null" class="final-price solid-top">
			<view class="price">
				<view>优惠：<text class="del-price">¥ {{ couponSelected.voucher_reduce }}</text></view>
				<view style="margin-left: 30rpx;">实付总额：<text class="true-price">¥ {{ finalMoney }}</text></view>
			</view>
		</view>
		<view class="bottom-btn">
			<view class="btn" @click="addBuy">
				立即支付
			</view>
		</view>
	</view>
</template>

<script  type="text/javascript" src="plus-confusion://../enterpriseServer/payment/index/index"></script>

<style lang="scss" scoped>
@import url(@/static/css/font.css);
@import url(@/static/css/iconfont.css);
@import "index.scss";

.pay-list {
	margin-top: 38rpx;
	font-size: 28prx;

	.pay-item {
		padding: 33rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.name {
			.iconfont {
				font-size: 50rpx;
				margin-right: 12rpx;
			}
		}

		.check {
			color: #999;
			font-size: 36rpx;

			&.iconchoosehandle {
				color: rgb(66, 145, 255);
			}
		}
	}
}
</style>
